<template>
  <view style="display: flex; align-items: center; justify-content: space-between">
    <view v-for="(day, index) in days" :key="index" class="date-item" @click="selectDay(index)">
      <text class="week-text">{{ day.week }}</text>
      <view
        class="circle-container"
        :style="{
          backgroundColor: day.isSelected ? '#c6c6c6' : '', // 如果选中，背景色为绿色
        }"
      >
        <text
          class="date-text"
          v-if="day.isRecord"
          :style="{
            color: day.isSelected ? '#ffffff' : '', // 如果选中，背景色为绿色
          }"
        >
          {{ day.date }}
        </text>
        <text
          class="date-text"
          v-else
          :style="{
            color: day.isSelected ? '#ffffff' : '#cccccc', // 如果选中，背景色为绿色
          }"
        >
          {{ day.date }}
        </text>
        <!--        <view v-if="day.isCompleted" class="status-tag">已打</view>-->
      </view>
      <text class="steps-text" v-if="day.isBeyond && day.isRecord" style="color: #ee6666">
        {{ day.energy }}
      </text>
      <text class="steps-text" v-if="!day.isBeyond && day.isRecord" :style="{color: commonColor}">
        {{ day.energy }}
      </text>
      <text class="steps-text" v-if="!day.isRecord">-</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
const props = defineProps({
  commonColor: {
    type: String,
    default: "#82d44f",
  },
});
const emit = defineEmits(["handleDatePlanConfirm"]);
const days = ref([]);
const showData = (data) => {
  days.value = data;
};
const selectDay = (index) => {
  days.value = days.value.map((item, i) => {
    if (i === index) {
      emit("handleDatePlanConfirm", { value: new Date(item.oriDate) });
    }
    return {
      ...item,
      isSelected: i === index,
    };
  });
};

defineExpose({ showData });
</script>

<style scoped>
.date-picker {
  display: flex;
  overflow-x: auto;
  padding: 10px 0;
  white-space: nowrap;
}
.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  margin: 0 8px;
}
.week-text {
  color: #666;
  font-size: 10px;
}
.circle-container {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.date-text {
  font-size: 12px;
  font-weight: bold;
  position: relative;
  z-index: 2;
}
.status-tag {
  position: absolute;
  top: -8px;
  background: #22c55e;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
}
.steps-text {
  font-size: 10px;
  font-weight: bold;
  margin-top: 5px;
}
</style>
